<template>
	<view class="nav" :style="{ 'top': distanceY ? distanceY : 0 }">
		<!-- <slot name="left"></slot> -->
		<image src="../../static/image/icons/chat.png" class="icon_1"></image>
		<view class= "nav_c">
				<!-- <slot name="con"></slot> -->
				<view class="rec" :class="{ active: true}">
					推荐
				</view>
				<view class="band" >
					品牌
				</view>
		</view>
		<view class="nav_r">
			<!-- <slot name="right"></slot> -->
			<image src="../../static/image/icons/search.png" class="icon_2" @tap="goSearch"></image>
			<image src="../../static/image/icons/cart.png" class="icon_3" @tap="goCart"></image>
		</view>
	</view>
</template>

<script>
	export default {
		// props: ['distanceY'],
		data() {
			return {
				styleFlag: false,
				distanceY: uni.getStorageSync('distanceY') || 0
			};
		},
		methods: {
			goSearch () {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			goCart () {
				uni.navigateTo({
					url: '/pages/cart/cart'
				})
			}
		},
		onLoad() {
			// if (uni.getMenuButtonBoundingClientRect()) {
			// 	this.distanceY = uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height + 5 + 'px';
			// 	console.log('sd00', this.distanceY)
			// }
		}
	}
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 64rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	// background-color: #000;
	.icon_1 {
		width: 42rpx;
		height: 42rpx;
	}
	.nav_c {
		flex: 1;
		display: flex;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		letter-spacing: 2.29rpx;
		.rec, .band {
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			&::after {
				position: absolute;
				bottom: 0;
				right: 5rpx;
				content: '';
				width: 64rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
				display: none;
			}
			&.active {
				&::after {
					display: block;
				}
			}
		}
		.rec {
			margin-right: 33rpx;
			
		}
	}
	.nav_r {
		.icon_2,.icon_3{
			width: 36rpx;
			height: 36rpx;
		}
		.icon_3{
			margin-left: 36rpx;
		}
	}
}
</style>
